let listData = [
    {name: "广州南沙星河", addr: "地址：广州市南沙区南沙街金沙路西侧星河盛世星河COCO Go 购物中心一楼L1C-010、012；L1S-049号", tel: "020-39002942", time: "10:00-00:00"},
    {name: "广州雪松中心", addr: "地址：广州黄埔区开创大道以南、开达路以西雪松国际商务中心105、 107号商铺", tel: "13632295923", time: "8:00-22:00"},
    {name: "广州番禺永旺梦乐城", addr: "地址：广州市番禺区亚运大道1号永旺梦乐城  0001-1商铺", tel: "020-23331672", time: "10:00-22:00"},
    {name: "广州中山大道中分公司（曼城广场）", addr: "地址：广州市天河区中山大道中1242 号漫广场（  M•Park）一层 L1-118铺", tel: "020-32030070", time: "10:00-23:00"},
    {name: "广州时代E-PARK", addr: "地址：广州市天河区高唐路233号6-106，6-107商铺", tel: "", time: "7:30-23:00"},

    {name: "广州天河联合社区店", addr: "地址：广州市天河区中山大道中379号6108-6109", tel: "13326419024", time: "08:00-23:00"},
    {name: "广州番禺喜悦天地", addr: "地址：广州市番禺区市桥街光明北路223号喜悦天地首层127号铺", tel: "020-31100468", time: "08:00-22:00"},
    {name: "广州汇智三路奥园国际中心", addr: "地址：广东省广州市番禺区汇智三路65号奥园国际中心第一、二层自编7栋166、167、168、259、260号商铺", tel: "15013007447", time: "7:30-0:00"},
    {name: "广州荔园新天地", addr: "地址：广州市番禺区沙湾镇西环路1508号首层23号", tel: "020-31047621", time: "7:30-0:00"},
    {name: "马场路", addr: "地址：广州市天河区马场路36号太阳新天地购物中心负一楼B134、B135-1铺位", tel: "020-38325586", time: "10:00-22:00"},

    {name: "广州曜一城", addr: "地址：广州市天河北路711-713 号一层商铺", tel: "15914320210", time: "8:00-22:00"},
    {name: "广州黄埔大道西", addr: "地址：广州市天河区黄埔大道西120号1楼103B商铺 ", tel: "18312050940", time: "24H"},
    {name: "广州远洋天骄广场", addr: "地址：广东省广州市天河区元京路4号“  远洋天骄广场”121,122,123,124号商铺", tel: "020-28017771", time: "8:00-23:00"},
    {name: "广州正佳店", addr: "地址：广州市天河区正佳广场3F-3A013-017/3G006号商铺", tel: "020-38331781", time: "10:00-22:00"},
    {name: "广州东站2店", addr: "地址：广州市天河区东站路1号东站综合楼裙楼一楼西区", tel: "020-38083216", time: "8:00-22:00"},

    {name: "番禺鸿福路分公司（祈福缤纷世界）", addr: "地址：广州市番禺区钟村街家兴二街15、17、19号101房；鸿福路91、93号101房", tel: "020-31564864", time: "8:00-00:00"},
    {name: "广州华穗路", addr: "地址：广东省广州市天河区华穗路406号之一第1层05、06房自编号103、104", tel: "18620019164", time: "7:30-23:00"},
    {name: "建滔大厦", addr: "地址：广州市天河区珠江新城花城大道18号建滔广场第 1 层第 03 号单元", tel: "020-38917306", time: "7:30-23:00"},
    {name: "广州合生广场", addr: "地址：广州市海珠区叠景路156-170 号L2-05/06A商铺", tel: "020-89118850", time: "10:00-22:00"},
    {name: "广州新港西路", addr: "地址：广州市海珠区新港西路82号广州轻纺交易园区正门右侧A1003-A1006号商铺", tel: "020-89189137", time: "08:00-23:00"},

    {name: "广州龙禧中心餐厅", addr: "地址：广州市启德路22号F栋F110,F111,F112,F113", tel: "", time: "07:30-22:00"},
    {name: "广州世贸店", addr: "地址：广州市环市东路371-375号广州世界贸易中心大厦首层2-4号商铺", tel: "020-87302329", time: "7:30-2:00"},
    {name: "广州海珠区昌岗中路", addr: "地址：广州市海珠区昌岗中路188号L1-102/L2-201号商铺", tel: "020-34401011", time: "8:00-23:00"},
    {name: "广州凯德店", addr: "地址：广州市白云区云城西路890号凯德广场.云尚B2层38号 一楼F1-A11汉堡王商铺", tel: "020-37416327", time: "9:00-22:00"},
    {name: "广州流花路分公司（中国大酒店）", addr: "地址：广州市越秀区流花路【  中国大酒店】【  一】楼【  S120；S152；S151；S137】号", tel: "020-83515420", time: "24H"},

    {name: "广州亚洲金融中心", addr: "地址：广州市东风西路207号亚洲金融中心一楼L1C-003号商铺", tel: "020-39937814", time: "7:30-22::00"},
    {name: "广州越秀新都汇", addr: "地址：广州市越秀区中山六路240号新都会大厦101-07单元", tel: "", time: "7:30-23:00"},
    {name: "广州远景路", addr: "地址：广州市白云区远景路14号园区101B号商铺", tel: "15915730581", time: "8:00-23:00"},
    {name: "广州荔湾华发中央公园", addr: "地址：州市荔湾区华发中央公园商业街E3栋1、2层E3-101、E3-102、E3-103、E3-104、E3-202号商铺", tel: "", time: "8:00-22:00"},
    {name: "广州白云区佰德中源广场", addr: "地址：广州市白云区西槎路111号", tel: "", time: "08:00-23:00"},

    {name: "广州花城茶园广场", addr: "地址：广州市花都区花城街茶园路15号", tel: "", time: "08:00-22:00"},
    {name: "广州沙凤三路（金沙洲永旺）", addr: "地址：广东省广州市白云区沙凤三路1号、1号之一、1号之二永旺梦乐城广州金沙1层127号商铺", tel: "18620019164", time: "10:00-22:00"}
]

// 渲染数据
let template = arr => {
    let list = document.querySelector(".list-box ul");
    let str = ``;
    for (let i = 0; i < arr.length; i++) {
        str += `
            <li>
                <div class="list-info">
                    <p class="list-title">
                        店名：<span>${arr[i].name}</span>
                        <img src="./img/restaurant/icon_czk.png" alt="icon">
                    </p>
                    <p class="list-adr">${arr[i].addr}</p>
                    <p class="list-tel">电话：<span>${arr[i].tel}</span></p>
                </div>
                <div class="list-btn">
                    <button>查看详情</button>
                    <p>营业时间</p>
                    <span>${arr[i].time}</span>
                </div>
            </li>
        `
    }
    list.innerHTML = str;
}
template(listData);

// 添加属性
let addClass = () => {
    for (let i = 0; i < 32; i++) {
        if (i < 5) {
            $(".list-box ul li").eq(i).addClass("list-item").attr("pageCode", "0");
        } else if (i >= 5 && i < 10) {
            $(".list-box ul li").eq(i).addClass("list-item2").attr("pageCode", "1");
        } else if (i >= 10 && i < 15) {
            $(".list-box ul li").eq(i).addClass("list-item3").attr("pageCode", "2");
        } else if (i >= 15 && i < 20) {
            $(".list-box ul li").eq(i).addClass("list-item4").attr("pageCode", "3");
        } else if (i >= 20 && i < 25) {
            $(".list-box ul li").eq(i).addClass("list-item5").attr("pageCode", "4");
        } else if (i >= 25 && i < 30) {
            $(".list-box ul li").eq(i).addClass("list-item6").attr("pageCode", "5");
        } else if (i >= 30) {
            $(".list-box ul li").eq(i).addClass("list-item6").attr("pageCode", "6");
        }
    }
}
addClass();

// 绑定事件(页码)
let addClick = () => {
    // 页码索引值
    let pageIndex = 0;
    let allow = { opacity: "1", cursor: "pointer" };
    let notAllow = { opacity: "0.6", cursor: "not-allowed" };
    let pageCount = document.querySelector(".page-count span");
    // 点击增减页码索引值
    $(".page").on("click", "div", function () {
        // 点击上一页时，页码索引值减1
        if ( $(this).index() == 0 ) {
            console.log("上一页");
            if (pageIndex <= 0) {
                return;
            }
            pageIndex--;
        // 点击下一页时，页码索引值加1
        } else if ( $(this).index() == 4 ) {
            console.log("下一页");
            if (pageIndex >= 6) {
                return;
            }
            pageIndex++;
        }
        console.log(pageIndex);

        // 指定页面显示按钮不可选
        if (pageIndex <= 0) {
            $(".page-last").css(notAllow);
            $(".page-next").css(allow);
        } else if (pageIndex >= 6) {
            $(".page-last").css(allow);
            $(".page-next").css(notAllow);
        } else {
            $(".page-last").css(allow);
            $(".page-next").css(allow);
        }

        // 切换页面
        // 显示当前页面的元素
        $(`.list-box ul li[pageCode=${pageIndex}]`).show();
        // 隐藏非当前页面的元素
        $(`.list-box ul li[pageCode!=${pageIndex}]`).hide();
        // 高亮显示4当前页面的页码
        $(".page li").eq(pageIndex).addClass("active").siblings().removeClass("active");
        // 渲染当前页码
        pageCount.innerText = pageIndex + 1;
    })
        
    // 页码切换
    $(".page-box").on("click", "li", function () {
        // 将页码按钮索引值赋给页码索引值
        pageIndex = $(this).index();
        // 切换页面
        $(`.list-box ul li[pageCode=${pageIndex}]`).show();
        $(`.list-box ul li[pageCode!=${pageIndex}]`).hide();
        $(".page-box li").eq(pageIndex).addClass("active").siblings().removeClass("active");
        pageCount.innerText = pageIndex + 1;

        // 指定页面显示按钮不可选
        if (pageIndex <= 0) {
            $(".page-last").css(notAllow);
            $(".page-next").css(allow);
        } else if (pageIndex >= 6) {
            $(".page-last").css(allow);
            $(".page-next").css(notAllow);
        } else {
            $(".page-last").css(allow);
            $(".page-next").css(allow);
        }
    })
}
addClick();

// let mask = () => {
//     $(".list-btn").on("click", "button", function() {
//         console.log($(this).parent().parent());
//     })
// }
// mask();